<template>
  <PageHeader name="线路管理"></PageHeader>
  <div class="container-box">
    <!-- 搜索区域 -->
    <el-row justify="end">
      <el-col :span="3">
        <el-input v-model="searchQuery" placeholder="搜索线路名称" @input="handleSearch" />
      </el-col>
      <el-col :span="18"> </el-col>
      <el-col :span="3" >
        <el-button type="warning" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :default-sort="{ prop: 'date', order: 'descending' }"
          :data="filterTableData"
          border
          style="width: 100%"
        >
          <el-table-column label="线路名称" prop="name" width="280" />
          <el-table-column
            label="线路类型"
            :filters="[
              { text: 'aa', value: 'aa' },
              { text: 'bb', value: 'bb' },
            ]"
            :filter-method="filterType"
            prop="type"
            width="180"
          />
          <el-table-column label="所属地区" prop="area" />
          <el-table-column label="更新时间" prop="date" sortable />
          <el-table-column fixed="right" label="操作" min-width="120" width="180">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                :icon="Edit"
                circle
              />
              <el-button type="danger" :icon="Delete" circle size="small" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          v-model:currentPage="currentPage"
          :hide-on-single-page="tableData.length"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>

  <!-- 新增/编辑对话框 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form :model="form" label-width="80px">
      <el-form-item label="线路名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="线路类型">
        <el-input v-model="form.type" />
      </el-form-item>
      <el-form-item label="所属地区">
        <el-input v-model="form.area" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary">保存</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import PageHeader from '@/components/layout/PageHeader.vue'
import { Delete, Edit } from '@element-plus/icons-vue'

import { ref, computed } from 'vue'
//搜索
const searchQuery = ref('')
//分页
const currentPage = ref(1)
const pageSize = ref(10)
//dialog
const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({ name: '', type: '', area: '', date: '' })
const editIndex = ref(-1)
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
}
const filterType = (value: string, row: TableItem) => {
  return row.type === value
}
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !searchQuery.value || data.name.toLowerCase().includes(searchQuery.value.toLowerCase()),
  ),
)

const handleSearch = () => {
  currentPage.value = 1 // 搜索时重置分页
}

const handleAdd = () => {
  dialogTitle.value = '新增'
  form.value = { name: '', type: '', area: '', date: '' }
  editIndex.value = -1
  dialogVisible.value = true
}
const handleEdit = (row: TableItem) => {
  dialogVisible.value = true
  form.value = { ...row }
  editIndex.value = tableData.indexOf(row)
  dialogVisible.value = true
}
interface TableItem {
  name: string
  area: string
  type: string
  date: string
}
const tableData: TableItem[] = [
  {
    date: '2016-05-03',
    name: 'Dom',
    area: 'No. 189, Grove St, Los Angeles',
    type: 'aa',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    area: 'No. 189, Grove St, Los Angeles',
    type: 'bb',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    area: 'No. 189, Grove St, Los Angeles',
    type: 'aa',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    area: 'No. 189, Grove St, Los Angeles',
    type: 'aa',
  },
]
</script>

<style scoped>
.container-box {
  padding: 0px 20px 20px 20px;
}
.el-row {
  margin-bottom: 20px;
}
</style>
